<style scoped>
table {
  border-collapse: collapse;
}
table th,
td {
  border: 1px solid #e9eaec;
  margin: 0;
  padding: 10px;
}
table tr {
  margin: 0;
}

</style>
<template>
  <div>
    <table style="width:100%;">
      <tr style="border:1px solid #eee;">
        <th>抓取</th>
        <th>属性名</th>
        <th>单位</th>
        <th>属性类别</th>
        <th>
          <div style="display:flex;">
            <div style="flex:1;display:flex;align-items:center;justify-content:center;">上限值</div>
            <div style="flex:1;display:flex;align-items:center;justify-content:center;">下线值</div>
          </div>
        </th>
        <th>地址码</th>
        <th>数据长度</th>
        <th>数据类型</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in collectionData" :key="index" >
        <td>
          <Checkbox v-model="collectionData[index].isGet" style="margin:0 auto;"></Checkbox>
        </td>
        <td>
          <Input v-model="collectionData[index].name" placeholder="属性名"></Input>
        </td>
        <td>
          <Select v-model="collectionData[index].unit" style="width: 100px;" :transfer="true">
            <Option v-for="(item,index) in units" :value="item.name" :key="'unit'+index">{{ item.name }} </Option>
          </Select>
        </td>
        <td>
          <Select v-model="collectionData[index].propertyType" style="width: 100px;" :transfer="true">
            <Option v-for="(item,index) in propertysTypes" :value="item.value" :key="'factory'+index">{{ item.name }}</Option>
          </Select>
        </td>
        <td>
          <div style="display:flex;">
            <div style="flex:1;display:flex;align-items:center;justify-content:center;padding-right:5px;">
              <Input v-model="collectionData[index].warnUp" placeholder="上限值"></Input>
            </div>
            <div style="flex:1;display:flex;align-items:center;justify-content:center;padding-left:5px;">
              <Input v-model="collectionData[index].warnDown" placeholder="下线值"></Input>
            </div>
          </div>
        </td>
        <td>
          <Input v-model="collectionData[index].valueAddr" placeholder="地址码"></Input>
        </td>
        <td>
          <Input v-model="collectionData[index].dataLen" placeholder="数据长度"></Input>
        </td>
        <td>
          <Input v-model="collectionData[index].dataType" placeholder="数据类型"></Input>
        </td>
        <td>
          <Button type="error" @click.native="deleteOne(index)" v-show="index > 0">删除</Button>
        </td>
      </tr>
    </table>
    <Alert v-show="tipError" type="error" show-icon>{{tipError}}</Alert>
    <!-- <div style="padding:10px 0;">
      <Button type="ghost">取消</Button>
      <Button type="success" @click.native="addOne">增加</Button>
      <Button type="info" @click.native="handleSubmit">确定</Button>
    </div> --></div>
</template>
<script>
export default {
  created: function () {
    if (this.$store.state.selections.length !== 0) {
      this.deviceTypes = this.$store.state.selections['1003']
      this.propertysTypes = this.$store.state.selections['1004']
      this.units = this.$store.state.selections['1005']
    }
  },
  data: function () {
    return {
      illegal: false,
      propertysTypes: [], // 数据类型选择
      units: [], // 单位选择
      editOneData: {},
      collectionData: [{
        isGet: false,
        name: '电压',
        warnUp: '',
        warnDown: '',
        valueAddr: '',
        dataLen: ''
      }],
      tipError: '',
      inputObj: {
        isGet: false,
        name: '电压',
        warnUp: '',
        warnDown: '',
        valueAddr: '',
        dataLen: ''
      }
    }
  },
  methods: {
    handleSubmit: function () {
      let self = this
      // 验证是否都输入
      self.collectionData.forEach((item) => {
        for (let key in self.inputObj) {
          if (key === 'isGet') {
            continue
          }
          if (item[key] === undefined || item[key] === null || item[key] === '' || item[key].toString().trim() === '') {
            self.tipError = '请填写所有输入框！不能输入空格！'
            self.illegal = true
            return
          } else {
            item[key] = item[key].toString().trim()
            self.tipError = ''
          }
        }
      })
      if (self.illegal) {
        // 避免下次点击，还提示错误
        self.illegal = false
      } else {
        sessionStorage.typeDeviceCollection = true
        self.submitReady()
      }
    },
    handleReset: function () {
      console.log(123)
    },
    addOne: function () {
      let self = this
      let obj = {
        isGet: false,
        name: '',
        warnUp: '',
        warnDown: '',
        valueAddr: '',
        dataLen: ''
      }
      self.collectionData.push(obj)
    },
    deleteOne: function (index) {
      let self = this
      if (self.collectionData.length === 1) {}
      self.collectionData.splice(index, 1)
    },
    // 更新data
    updateFormdata: function (data) {
      let self = this
      self.editOneData = JSON.parse(JSON.stringify(data))
      if (self.editOneData.id !== undefined && self.editOneData.iotCollItems.length > 0) {
        self.collectionData = JSON.parse(JSON.stringify(self.editOneData.iotCollItems))
        self.collectionData.map((item) => {
          if (item.isGet === 1) {
            item.isGet = true
          } else {
            item.isGet = false
          }
          return item
        })
      } else {
        self.collectionData = [{
          isGet: false,
          name: '',
          warnUp: '',
          warnDown: '',
          valueAddr: '',
          dataLen: ''
        }]
      }
    },
    // submitReady 准备
    submitReady: function () {
      let self = this
      let InfoBOOL = (sessionStorage.typeDeviceInfo === 'true' || sessionStorage.typeDeviceInfo === true)
      let CollectionBOOL = (sessionStorage.typeDeviceCollection === 'true' || sessionStorage.typeDeviceCollection === true)
      if (!(InfoBOOL) && (CollectionBOOL)) {
        // oneTab显示内容有误
        let chirldData = {
          tab: 'oneTab',
          arrStr: JSON.stringify(self.collectionData)
        }
        self.$emit('showTab', chirldData)
        return
      }
      // 把数据推送到父组件
      let chirldData = {
        tab: 'twoTab',
        arrStr: JSON.stringify(self.collectionData)
      }
      self.$emit('showTab', chirldData)
      if (sessionStorage.typeDeviceInfo && sessionStorage.typeDeviceCollection) {
        if (self.editOneData.id) {
          self.$emit('updSubmitReady')
        } else {
          self.$emit('saveSubmitReady')
        }
      }
    }
  }
}

</script>
